<template>
    <div class="paoductProfitCalculation-table-warp">
        <download
            ref="download"
            :columns="objColumns"
            :allColumns="allColumns"
            :title="$t('m.excel.paoductProfitCalculation')"
            @getDataxlsx="getDataxlsx"
            size="medium"
        ></download>
        <dataColumSetting
            ref="dataColum"
            :columns="columns"
            :allColumns="allColumns"
            w="615px"
            @updColumns="updColumn"
            size="medium"
        ></dataColumSetting>
        <pagination :length="total" :pagination="pagination" @currpage="getData" float="right"></pagination>
        <el-table
            :data="tableData"
            ref="table"
            border
            :header-cell-style="getRowClass"
            v-loading="loading"
        >
            <el-table-column
                key="1"
                prop="businessUnit"
                :label="$t('m.label.BU')"
                v-if="!objColumns.businessUnit"
            ></el-table-column>
            <el-table-column
                key="2"
                prop="productCategory"
                :label="$t('m.label.productCategory')"
                v-if="!objColumns.productCategory"
            ></el-table-column>
            <el-table-column
                key="3"
                prop="productModelNumber"
                :label="$t('m.label.productModelNumber')"
                v-if="!objColumns.productModelNumber"
                 min-width="100"
            >
                <template slot-scope="scope">
                    <el-link
                        :href="
                            '#/productCenter/productBasicInfo?model=' + scope.row.productModelNumber
                        "
                    >{{ scope.row.productModelNumber }}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                key="4"
                prop="productDescriptionChs"
                :label="$t('m.label.descriptionChs')"
                v-if="!objColumns.productDescriptionChs"
                min-width="200px"
            >
                <template slot-scope="scope">
                    <div
                        style="font-size: 12px;line-height: 16px;"
                    >{{ scope.row.productDescriptionChs }}</div>
                </template>
            </el-table-column>
            <el-table-column
                key="5"
                prop="asin"
                :label="$t('m.label.ASIN')"
                v-if="!objColumns.asin"
                min-width="120"
            >
                <template slot-scope="scope">
                    <el-link :href="'#/productCenter/productBasicInfo?asin=' + scope.row.asin">
                        {{
                        scope.row.asin
                        }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column
                key="6"
                prop="userName"
                :label="$t('m.label.principal')"
                v-if="!objColumns.userName"
            ></el-table-column>
            <el-table-column
                key="7"
                prop="countryName"
                :label="$t('m.label.country')"
                v-if="!objColumns.countryName"
            ></el-table-column>
            <el-table-column
                key="8"
                prop="status"
                :label="$t('m.label.productStatus')"
                min-width="120px"
                v-if="!objColumns.status"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">
                        {{
                        scope.row.status | filtersText
                        }}
                    </span>
                    <el-select
                        v-model="scope.row.status"
                        collapse-tags
                        v-if="scope.row.edit"
                        size="mini"
                    >
                        <el-option :label="$t('m.label.pendingProject')" :value="2"></el-option>
                        <el-option :label="$t('m.label.goOnline')" :value="1"></el-option>
                        <el-option :label="$t('m.label.waitingForOnline')" :value="3"></el-option>
                        <el-option :label="$t('m.label.OffShelf')" :value="-2"></el-option>
                        <el-option :label="$t('m.label.cancelProjects')" :value="-3"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                key="9"
                prop="sellingPrice"
                :label="$t('m.label.Price')"
                min-width="100px"
                v-if="!objColumns.sellingPrice"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">
                        {{
                        scope.row.sellingPrice
                        }}
                    </span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.sellingPrice"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="10"
                prop="commission"
                :label="$t('m.label.commission')"
                v-if="!objColumns.commission"
            ></el-table-column>
            <el-table-column
                key="11"
                prop="fbaCost"
                :label="$t('m.label.fbaCost')"
                v-if="!objColumns.fbaCost"
            ></el-table-column>
            <el-table-column
                key="12"
                prop="vat"
                :label="$t('m.label.VAT')"
                v-if="!objColumns.vat"
                min-width="100"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">{{ scope.row.vat }}</span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.vat"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="13"
                prop="realIncomeLocalCurrency"
                :label="$t('m.label.realIncomeLocalCurrency')"
                v-if="!objColumns.realIncomeLocalCurrency"
                min-width="120"
            ></el-table-column>
            <el-table-column
                key="14"
                prop="sinkLoss"
                :label="$t('m.label.sinkLoss')"
                v-if="!objColumns.sinkLoss"
                min-width="100"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">{{ scope.row.sinkLoss }}</span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.sinkLoss"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="15"
                prop="realIncomeRmb"
                :label="$t('m.label.realIncomeRmb') + '(RMB)'"
                min-width="120"
                v-if="!objColumns.realIncomeRmb"
            ></el-table-column>
            <el-table-column
                key="16"
                prop="procurementCosts"
                :label="$t('m.label.purchaseCost') + '(RMB)'"
                min-width="120"
                v-if="
                    !objColumns.procurementCosts 
                "
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">
                        {{
                        scope.row.procurementCosts
                        }}
                    </span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.procurementCosts"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="17"
                prop="logisticsExpense"
                :label="$t('m.label.logisticsExpense') + '(RMB)'"
                min-width="120"
                v-if="!objColumns.logisticsExpense"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">
                        {{
                        scope.row.logisticsExpense
                        }}
                    </span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.logisticsExpense"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="18"
                prop="targetDailyAverage"
                :label="$t('m.label.targetDailyAverage')"
                v-if="!objColumns.targetDailyAverage"
                min-width="100"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">
                        {{
                        scope.row.targetDailyAverage
                        }}
                    </span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.targetDailyAverage"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="19"
                prop="targetSales"
                :label="$t('m.label.targetSales')"
                min-width="100"
                v-if="!objColumns.targetSales"
            ></el-table-column>
            <el-table-column
                key="20"
                prop="marketingExpense"
                :label="$t('m.label.marketingExpense')"
                v-if="!objColumns.marketingExpense"
            ></el-table-column>
            <el-table-column
                key="21"
                prop="ratioOfMarketing"
                :label="$t('m.label.ratioOfMarketing') + '(%)'"
                min-width="100"
                v-if="!objColumns.ratioOfMarketing"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">
                        {{
                        scope.row.ratioOfMarketing
                        }}
                    </span>
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.ratioOfMarketing"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                key="22"
                prop="profitRate"
                :label="$t('m.label.profitRate')"
                v-if="!objColumns.profitRate"
            ></el-table-column>
            <el-table-column
                key="23"
                prop="profit"
                :label="$t('m.label.profit')"
                v-if="!objColumns.profit"
            ></el-table-column>
            <el-table-column
                key="24"
                prop="grossProfit"
                :label="$t('m.label.grossProfit')"
                v-if="!objColumns.grossProfit"
            ></el-table-column>
            <el-table-column key="25" :label="$t('m.label.operating')" fixed="right" width="145">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="editItem(scope.row)"
                        :type="scope.row.edit ? 'primary' : ''"
                    >{{ scope.row.edit ? $t('m.button.save') : $t('m.button.edit') }}</el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="_calculator(scope.row)"
                    >{{$t('m.button.priceRelations')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: auto;">
            <pagination :length="total" :pagination="pagination" @currpage="getData" float="right"></pagination>
        </div>
        <scrollTable ref="scrollTable"></scrollTable>
        <calculator ref="calculator"></calculator>
    </div>
</template>
<script>
import pagination from "components/pagination/pagination.vue";
import scrollTable from "components/scroll/scroll-table.vue";
const ERR_OK = 200;
export default {
    props: {
        formData: ""
    },
    data() {
        return {
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            total: 0,
            item: [],
            tableData: [],
            calculator: {},
            updateItem: {},
            loading: true,
            objColumns: {},
            columns: [],
            allColumns: []
        };
    },
    filters: {
        filtersText(text) {
            if (text == "2") {
                return "待立项";
            } else if (text == "1") {
                return "已上线";
            } else if (text == "3") {
                return "待上线";
            } else if (text == "-2") {
                return "已下架";
            } else if (text == "-3") {
                return "已上线";
            } else {
                return text;
            }
        }
    },
    created() {
        this.getData();
    },
    mounted() {
        this.allColumns = JSON.parse(JSON.stringify(this.$refs.table.columns));
    },
    methods: {
        // 获取数据列表
        getData() {
            this.loading = true;
            this.formData.userId = this.$store.getters.userId;
            this.formData.pageNumber = this.pagination.currpage;
            this.formData.pageSize = this.pagination.pagesize;
            this.tableData = [];
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.profitMeasurementService +
                    "/search/find?userId=" +
                    this.$store.getters.userId,
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    if (res.data.data.data) {
                        let data = res.data.data.data;
                        for (let i in data) {
                            data[i].edit = false;
                        }
                        this.tableData = data;
                        this.total = res.data.data.total;
                        this.getColumn(JSON.parse(res.data.data.dataColumn));
                        this.$refs.scrollTable.scrollShow(this.$refs.table)
                    }
                }
                this.loading = false;
            });
        },
        getColumn(val) {
            this.objColumns = {};
            this.columns = val;
            this.allColumns.forEach(ele => {
                if (val.indexOf(ele.property) === -1) {
                    this.objColumns[ele.property] = true;
                }
            });
        },
        // 更新数据列
        updColumn(val) {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.profitMeasurementService +
                    "/dataColumn/update?profitDataColumn=" +
                    val.join() +
                    "&userId=" +
                    this.$store.getters.userId
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getColumn(val);
                    this.getData();
                    this.$refs.dataColum.dataColumhide();
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 更新表格列表数据Item
        update(item) {
            item.userId = this.$store.getters.userId;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.profitMeasurementService +
                    "/updateProfit/update",
                data: item
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.updateItem = res.data.data.data[0];
                    this.$message.success("编辑成功");
                } else {
                    this.$message.error("编辑失败");
                }
            });
        },
        // 编辑
        editItem(item) {
            item.edit = item.edit ? false : true;
            if (item.edit === false) {
                this.update(item);
            }
        },
        // 比价器
        _calculator(item) {
            this.calculator = item;
            this.$refs.calculator.calculatorShow();
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        //下载
        getDataxlsx() {
            let form = JSON.parse(JSON.stringify(this.formData));
            delete form.pageNumber;
            delete form.pageSize;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.profitMeasurementService +
                    "/search/find?userId=" +
                    this.$store.getters.userId,
                data: form
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$refs.download.getDataXlsx(res.data.data.data);
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        }
    },
    watch: {
        formData() {
            this.total = 0;
            this.pagination.currpage = 1;
            this.getData();
        },
        updateItem(item) {
            for (let i in this.tableData) {
                if (
                    this.tableData[i].amzProductProfitMeasurementId ===
                    item.amzProductProfitMeasurementId
                ) {
                    this.tableData[i].commission = item.commission;
                    this.tableData[i].grossProfit = item.grossProfit;
                    this.tableData[i].marketingExpense = item.marketingExpense;
                    this.tableData[i].profit = item.profit;
                    this.tableData[i].profitRate = item.profitRate;
                    this.tableData[i].realIncomeLocalCurrency =
                        item.realIncomeLocalCurrency;
                    this.tableData[i].realIncomeRmb = item.realIncomeRmb;
                    this.tableData[i].targetSales = item.targetSales;
                    this.tableData[i].status = item.status;
                }
            }
        }
    },
    components: {
        pagination,
        dataColumSetting: resolve =>
            require([
                "components/dataColumSetting/dataColumSetting.vue"
            ], resolve),
        download: resolve => require(["components/xlsx/xlsx.vue"], resolve),
        calculator: resolve => require(["./calculator.vue"], resolve),
        scrollTable
    }
};
</script>
<style lang="stylus" scoped>
.el-table {
    margin: 10px 0;
    .el-button+.el-button {
        margin-left: 5px;
    }
}
</style>
<style lang="stylus">
.paoductProfitCalculation-table-warp {
    .el-input-number.is-controls-right .el-input__inner {
        padding-left: 5px;
        padding-right: 35px;
    }

    .el-input-number--mini {
        width: 80px;
    }
}
</style>
